<template>
  <div class="c-bg-sgray">
    <div class="c-bg-white c-flex-row c-ph24 c-pv16 c-justify-sb">
      <div class="c-fs22 c-fc-xblack c-lh36"><span class="c-lh">【{{startAt.slice(0, 7)}}】 </span>订单<span class="c-fc-xmlred">{{chainOrderInfo.orderNumber}}</span>条，营业额<span class="c-fc-xmlred">{{chainOrderInfo.totalPayMoney}}</span>元，退款金额<span class="c-fc-xmlred">{{chainOrderInfo.totalRefundMoney}}</span>元，{{chainOrderInfo.isPreData == 1 ? '预计' : ''}}收益<span class="c-fc-xmlred">{{chainOrderInfo.preIncome}}</span>元</div>
      <!-- <div class="c-fs22 c-fc-gray c-ws-ka c-flex-shrink0 c-ml20 c-lh36">{{startAt.slice(0, 7)}}</div> -->
    </div>
    <div class="c-ph24 c-pt4">
      <div v-for="(item, index) in chainOrderList" :key="index" class="c-bg-white c-ph20 c-pt20 c-pb30 c-br10 c-mt20">
        <div class="c-flex-row c-aligni-center">
          <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" class="c-ww56 c-hh56 c-br28" alt="">
          <div class="c-fs22 c-fc-xblack c-text-ellipsis1 c-w0 c-flex-grow1 c-fw400 c-ml8 c-mr8">{{item.nickname}}</div>
          <div v-if="item.finishAt" class="c-ww76 c-hh32 c-fs20 c-flex-row c-flex-center c-br8 due-color">已结算</div>
          <div v-else class="c-ww76 c-hh32 c-fs20 c-flex-row c-flex-center c-br8 c-fc-xmlred yjsy-bg">待结算</div>
        </div>
        <div class="c-flex-row c-mt20">
          <img :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" class="c-ww120 c-hh80 c-br10"/>
          <div class="c-w0 c-flex-grow1 c-ml20 c-flex-column c-justify-sb">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.prodName}}</div>
            <div class="c-fs20 c-fc-gray">
              实付<span class="c-fc-xmlred c-fs24 c-fw600">{{'￥' | iosPriceFilter}}{{item.payMoney}}</span>
              <span v-if="item.srtStatus == '已退款'">，退款<span class="c-fc-xblack c-fs24 c-fw600">{{'￥' | iosPriceFilter}}{{item.refundMoney}}</span></span>
            </div>
          </div>
        </div>
        <div class="c-mt4">
          <div class="c-flex-row c-aligni-center c-pt16">
            <div class="c-fs22 c-fc-gray">支付时间：</div>
            <div class="c-fs22 c-fc-xblack">{{item.payAt}}</div>
          </div>
          <div class="c-flex-row c-aligni-center c-pt16">
            <div class="c-fs22 c-fc-gray c-ws-ka">订单编号：</div>
            <div class="c-fs22 c-fc-xblack c-text-ellipsis1">{{item.orderNo}}</div>
            <div @click="copyText(item.orderNo)" class="c-fs20 c-fc-xblack c-ww60 c-hh28 c-br16 c-flex-row c-flex-center c-bg-f2 c-ml6">复制</div>
          </div>
          <div v-if="item.address" class="c-flex-row c-aligni-center c-pt16">
            <div class="c-fs22 c-fc-gray">收货地址：</div>
            <div class="c-fs22 c-fc-xblack">{{item.address}}</div>
          </div>
          <div class="c-flex-row c-aligni-center c-pt16">
            <div class="c-fs22 c-fc-gray">订单状态：</div>
            <div class="c-fs22 c-fc-xblack">{{item.srtStatus}}</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :noDataText="'暂无结果'" :noData="chainOrderList.length == 0" :noMoreData="chainOrderList.length > 0 && is_page == false" :showLoading="isLoading"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
export default {
  name: 'ChainBonusDetail',
  components: {
    loadingStatusTem
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      startAt: '',
      endAt: '',
      provinceId: 0,
      cityId: 0,
      areaId: 0,
      chainOrderInfo: '',
      chainOrderList: [],
      is_page: false,
      page: 1,
      isLoading: false
    }
  },
  created() {
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    copyText(orderNum) {
      utilJs.copyText(orderNum);
    },
    getBonusDetailList() {
      if (this.isLoading)
        return;
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}chainOrder/getChainOrderList?startAt=${this.startAt}&endAt=${this.endAt}&timeType=2&provinceId=${this.provinceId}&cityId=${this.cityId}&areaId=${this.areaId}&limit=10&page=${this.page}`, (res) => {
        this.chainOrderList = this.chainOrderList.concat(res.data);
        this.page = res.data && (res.data.length >= 10) ? (this.page + 1) : this.page;
        this.is_page = res.data && (res.data.length >= 10) ? true : false;
        this.isLoading = false;
      }, failRes => {
        this.isLoading = false;
      });
    },
    getBonusDetail() {
      utilJs.getMethod(`${global.apiurl}chainOrder/getChainOrderInfo?startAt=${this.startAt}&endAt=${this.endAt}&timeType=2&provinceId=${this.provinceId}&cityId=${this.cityId}&areaId=${this.areaId}`, (res) => {
        this.chainOrderInfo = res;
      });
    },
    //下滑加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page) {
          that.getBonusDetailList();
        }
      });
    },
  },
  activated() {
    setDocumentTitle('业绩明细');
    this.startAt = this.$route.query.startAt;
    this.endAt = this.$route.query.endAt;
    this.provinceId = this.$route.query.provinceId;
    this.cityId = this.$route.query.cityId;
    this.areaId = this.$route.query.areaId;
    this.chainOrderList = [];
    this.is_page = false;
    this.page = 1;
    this.isLoading = false;
    this.getBonusDetail();
    this.getBonusDetailList();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.scrollTo(0, 0);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.due-color {
  color: #258AFD;
  background: rgba(37, 138, 253, 0.1);
}
.yjsy-bg {
  background: rgba(255, 48, 12, 0.1);
}
</style>
